<template>
  <div class="main">
    <div class="info">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-width="120px"
        label-position="left"
        style="margin-top: 10px"
        size="small"
      >
        <el-form-item label="手机号" prop="ApplicantMobile">
          <el-input v-model="ruleForm.ApplicantMobile"></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="Applicant">
          <el-input v-model="ruleForm.Applicant"></el-input>
        </el-form-item>
        <el-form-item label="镇" prop="Town">
          <el-select
            ref="select0"
            @hook:mounted="cancalReadOnly"
            @visible-change="cancalReadOnly"
            v-model="ruleForm.Town"
            filterable
            clearable
            placeholder="请选择镇"
            :popper-append-to-body="false"
            popper-class="select"
          >
            <el-option
              v-for="item in TownList"
              :key="item.type"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="村" prop="Village">
          <el-select
            ref="select0"
            @hook:mounted="cancalReadOnly"
            @visible-change="cancalReadOnly"
            v-model="ruleForm.Village"
            filterable
            clearable
            @change="VillageChange"
            placeholder="请选择村"
            :popper-append-to-body="false"
            popper-class="select"
          >
            <el-option
              v-for="item in VillageList"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小组" prop="VillageGroup">
          <el-input v-model="ruleForm.VillageGroup"></el-input>
        </el-form-item>
        <el-form-item label="山名" prop="Mountain">
          <el-input v-model="ruleForm.Mountain"></el-input>
        </el-form-item>
        <el-form-item label="用火面积（亩）" prop="FireArea">
          <el-input v-model="ruleForm.FireArea" type="number"></el-input>
        </el-form-item>
        <el-form-item label="防火线长度(米)" prop="FireLineLength">
          <el-input v-model="ruleForm.FireLineLength" type="number"></el-input>
        </el-form-item>
        <el-form-item label="防火线宽度(米)" prop="FireLineWidth">
          <el-input v-model="ruleForm.FireLineWidth" type="number"></el-input>
        </el-form-item>
        <el-form-item label="申请用火时间" prop="UseTime">
          <el-date-picker
            v-model="ruleForm.UseTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd hh:mm"
            value-format="yyyy-MM-dd hh:mm"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="作业人" prop="Operator">
          <el-input v-model="ruleForm.Operator"></el-input>
        </el-form-item>
        <el-form-item label="作业人手机号" prop="OperatorMobile">
          <el-input v-model="ruleForm.OperatorMobile"></el-input>
        </el-form-item>
        <!-- <el-form-item label="作业前照片"  prop="PhotosBeforeHomework">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="upload"
            :file-list="ruleForm.PhotosBeforeHomework"
            name="PhotosBeforeHomework"
            v-model="ruleForm.PhotosBeforeHomework" 
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <div class="bottom_submit">
        <van-button class="button" type="primary" @click="_submit('ruleForm')"
          >确 定</van-button
        >
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { upload } from "@/api/common";
export default {
  components: {},
  data() {
    return {
      mID: 0, //监管单位ID
      VUE_APP_BASE_API:process.env.VUE_APP_BASE_API,
      PhotosBeforeHomework: [],
      PhotosBeforeHomeworkT: [],
      ruleForm: {
        // FireArea: 123,
        // FireLineLength: 123,
        // FireLineWidth: 321,
        // ApplicantMobile: "13333333333",
        // Mountain: "沙漠",
        // Applicant: "申请人",
        // Operator: "213",
        // OperatorMobile: "13333333333",
        // SafetyPersonnel: "22",
        // SafetyPersonnelMobile: "13333333333",
        Town: '常平',
        // UseTime: "2024-01-15T01:32:14.000Z",
        // Verifier: "243",
        // VerifierMobile: "13333333333",
        // Village: "居民村",
        // VillageGroup: "小组",
        // CompanyCode:'64682',
        // CompanyName:'居民村',
        // PhotosBeforeHomework: []
      },

      CompanyList: [],
      TownList: [
        {
          type: 0,
          name: "常平",
        },
      ],
      VillageList: [],
      show: false,
      codetype: 0,
      companyshow: false,
      //required 必填
      rules: {
        Name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        Applicant: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        Operator: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        ApplicantMobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        Village:[
        { required: true, message: "请选择村", trigger: "blur" },
        ],
        Mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        OperatorMobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        VerifierMobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        SafetyPersonnelMobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        FireArea: [{ required: true, message: "请输入", trigger: "blur" }],
        FireLineLength: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        FireLineWidth: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        UseTime: [{ required: true, message: "请输入", trigger: "blur" }],
        Verifier: [{ required: true, message: "请输入", trigger: "blur" }],
        SafetyPersonnel: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        Mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        CountryCode: [
          { required: true, message: "请选择您现在所属村", trigger: "change" },
        ],
        CountryTypeCode: [
          { required: true, message: "请选择企业分类", trigger: "change" },
        ],
        Company: [
          {
            required: true,
            message: "请选择您现在所属单位",
            trigger: "change",
          },
        ],
        PhotosBeforeHomework:[
        {
            required: true,
            message: "请选择作业前照片",
            trigger: "change",
          }
        ]
      },
      dialogImageUrl: "",
      dialogVisible: false,
      pickerOptions:{ 
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
            },
        }
    };
  },
  created() {
    //http://192.168.3.2:8088
    
    if(this.$route.query.ApplicantMobile){
      this.ruleForm.ApplicantMobile=this.$route.query.ApplicantMobile
    }else{
      this.ruleForm=this.$route.query.item
      // let templist=this.$route.query.item.PhotosBeforeHomework
      // this.ruleForm.PhotosBeforeHomework=[]
      // templist.split(';').forEach(element => {
      //   this.ruleForm.PhotosBeforeHomework.push({url:this.VUE_APP_BASE_API+element});
      // });
    }   
    this.$axios.get("/Public/GetCompanyList").then((e) => {
      console.log(e.data.List);
      this.VillageList = e.data.List;
    });
  },

  methods: {
    upload(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      // params.append("CompanyCode", this.ruleForm.CompanyCode);
      params.append("CompanyCode", 64681);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            this.ruleForm.PhotosBeforeHomework.push({url:this.VUE_APP_BASE_API+item.FilePath});
          });
          console.log(this.ruleForm.PhotosBeforeHomework)
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    handleRemove(file, fileList) {
      console.log("handleRemove");
      console.log(file, fileList);
      console.log(file);
      console.log(fileList);
      // fileList.forEach(item => {
      //   this.PhotosBeforeHomewor.push({url:this.VUE_APP_BASE_API+item.url});
      //   this.ruleForm.PhotosBeforeHomework.push(item.url)
      // });
      this.ruleForm.PhotosBeforeHomework=fileList
      console.log(this.ruleForm.PhotosBeforeHomework)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(file);
      console.log(this.dialogImageUrl);
    },
    // findUserInfo() {
    //   var self = this;
    //   var data = {};
    //   let params = { mobile: self.ruleForm.Mobile };
    //   this.$axios
    //     .get("/UserStudyTime/GetUserInfoByMobile", { params: params })
    //     .then((res) => {
    //       if (res.data.data != null) {
    //         data = res.data.data;
    //         if (this.codetype == 1) {
    //           self.ruleForm.Name = data.Name;
    //           self.ruleForm.Name = res.data.data.Name;
    //           self.ruleForm.CountryCode = res.data.data.CountryCode;
    //           self.ruleForm.Country = res.data.data.Country;
    //           self.CountryChange2(res.data.data.CountryCode);
    //           self.ruleForm.CompanyCode = res.data.data.CompanyCode;
    //           self.ruleForm.Company = res.data.data.Company;
    //         } else {
    //           this.ruleForm.CountryTypeCode = this.CompanyTypeList[0].name;
    //           if (res.data.data.CountryCode == 196505) {
    //             this.countryTypeShow_Type0 = false;
    //             this.ConpanyTypeName = this.CompanyTypeList[1].name;
    //             this.ruleForm.CountryTypeCode = this.CompanyTypeList[1].name;
    //           }
    //           if (res.data.data.CountryCode == 196506) {
    //             this.countryTypeShow_Type0 = false;
    //             this.ConpanyTypeName = this.CompanyTypeList[2].name;
    //             this.ruleForm.CountryTypeCode = this.CompanyTypeList[2].name;
    //           }
    //           self.ruleForm.Name = res.data.data.Name;
    //           self.ruleForm.CountryCode = res.data.data.CountryCode;
    //           self.ruleForm.Country = res.data.data.Country;
    //           // self.CountryChange(res.data.data.CountryCode);
    //           self.ruleForm.CompanyCode = res.data.data.CompanyCode;
    //           self.ruleForm.Company = res.data.data.Company;
    //         }
    //       } else {
    //         if (self.codetype == 1) {
    //           console.log("elf.codetype==1)");
    //           self.ruleForm.Name = "";
    //         } else {
    //           self.ruleForm.Name = "";
    //           self.ruleForm.CountryCode = "";
    //           self.ruleForm.CompanyCode = "";
    //         }
    //       }
    //     });
    // },

    cancalReadOnly(value) {
      this.$nextTick(() => {
        if (!value) {
          const { select0, select1, select2 } = this.$refs;
          // const input1 = select1.$el.querySelector(".el-input__inner");
          // const input2 = select2.$el.querySelector(".el-input__inner");
          const input0 = select0.$el.querySelector(".el-input__inner");
          // input1.removeAttribute("readonly");
          // input2.removeAttribute("readonly");
          input0.removeAttribute("readonly");
          this.$refs.select0.blur(function () {
            
          });
         // 根据tip自行判断是否添加;
        }
      });
    },
    // 提交数据
    //http://192.168.3.2:8088/Api/Public/AgricultureUseFireSubmit
    _submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var self = this;
  
          // self.ruleForm.PhotosBeforeHomework=self.ruleForm.PhotosBeforeHomework.map((e)=>{return e.url.substring(e.url.indexOf("//",7)+1)}).join(';')
          // console.log(self.ruleForm);
          this.$axios
            .post("/Public/AgricultureUseFireSubmit", self.ruleForm)
            // .post("/Public/AgricultureUseFireSubmit", {CompanyCode:"64684"})
            .then((res) => {
              if (res.success) {
                console.log(res);
                self.$toast.success("数据已保存");
                this.$router.push({
                  path: "/CPNS/List",
                  query: {
                    mobile: this.ruleForm.ApplicantMobile,
                  },
                });
              } else {
                self.$toast("提交失败，请检查填写是否有误!");
              }
            })  .catch((err) => {
              console.log("err", err);
        });
        } else {
          return false;
        }
      });
    },
    /**
     * 
     * @param {公司ID} type 
     * @desc 选择公司
     */
    VillageChange(type) {
      if (type) {
      let item=this.VillageList.find((n) => n.ID == type);
      this.ruleForm.Village = item.ID
      this.ruleForm.CompanyCode=item.ID
      this.ruleForm.CompanyName=item.Name
        console.log(this.ruleForm.CompanyName)
      }
    },
  },
};
</script>

<style lang="less">
.el-time-panel {
  left: -30px;
}
body {
  overflow: hidden;
  background: #ffffff;
}

.title {
  height: 30px;
  font-size: 20px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

/deep/.el-select-dropdown {
  position: absolute !important;
  left: 0px !important;
  border: 1px solid #010f13;
}

.main {
  background: #ffffff;
  height: auto;
}

.van-field__label {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  box-sizing: border-box;
  width: 50px;
  margin-right: 0.32rem;
  color: #646566;
  text-align: left;
  word-wrap: break-word;
}

.info {
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 20px;
}

.bottom_submit {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.button {
  width: 98%;
}
</style>
